/**
 * 权限指令 v-hasPermission
 * 用法：
 * 1. 单个权限：<button v-hasPermission="'add'">新增</button>
 * 2. 多个权限：<button v-hasPermission="['add', 'edit']">新增和编辑</button>
 */
import Vue from 'vue';

// 权限判断函数
function checkPermission(permissionKeys, routeMeta) {
    // 如果路由 meta 中没有配置权限，默认返回 true（允许访问）
    if (!routeMeta) {
        console.warn('路由未配置权限，默认允许访问');
        return true;
    }

    // 将权限标识统一转为数组
    const keys = Array.isArray(permissionKeys) ? permissionKeys : [permissionKeys];

    // 检查所有权限标识是否都存在
    const hasAllPermissions = keys.every((key) => {
        return routeMeta.includes(key)
    });

    if (!hasAllPermissions) {
        console.warn(`无权限访问：${keys.join(', ')}`);
    }

    return hasAllPermissions;
}

// 注册全局指令
Vue.directive('hasPermission', {
    inserted(el, binding, vnode) {
        const permissionKeys = binding.value; // 获取指令的值，例如 'add' 或 ['add', 'edit']
        const routeMeta = vnode.context.$route.meta.permission; // 获取路由 meta 中的权限配置

        // 检查权限
        if (!checkPermission(permissionKeys, routeMeta)) {
            // 如果没有权限，移除元素
            el.parentNode && el.parentNode.removeChild(el);
        }
    },
});
